<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0; 
			box-sizing: border-box;
			list-style: none;
		}
		.nav {
			width: 100%;
			height: 40px;
			line-height: 40px;
			overflow: hidden;
		}
		.nav ul {
			height: 100%;
			overflow: hidden;
			width: 2000px;
		}
		.nav li {
			width: 70px;
			height: 100%;
			float: left;
			text-align: center;
			border-bottom: 2px solid transparent;
			position: relative;
		}
		.nav li:after {
			content: "";
			position: absolute;
			top: 10px;
			right: 0;
			height: 20px;
			width: 1px;
			background-color: rgb(170,170,170);
		}
		.nav li:nth-last-child(1):after {
			width: 0;
		}
		.nav li.active {
			color: #ff5700;
			border-bottom: 2px solid #ff5700;
		}
		.main {
			height: calc(100vh - 40px);
			width: 100%;
			overflow: hidden;
		}
		.main .content {
			overflow: hidden;
			height: 100%;
		}
		.main .item {
			float: left;
			width: 375px;
			height: 100%;
		}
	</style>
	<script src="./zepto.js"></script>
	<script src="./hammer.js"></script>
	<script>	
		window.onload = function() {
			let oNav = document.getElementsByClassName('nav')[0];
			let oUl = document.getElementsByTagName('ul')[0];
			let oLis = oUl.children;
			let oMain = document.getElementsByClassName('.main')[0];
			let oContent = document.getElementsByClassName('content')[0];
			let oItems = oContent.children;
			// 拖动item内容切换
			let hammer = new Hammer(oContent);
			let startX,startY,x = 0,old_x,dir = '';

			// 在这里ajax请求所有导航和第一页的item内容

			// li和内容item因该是动态生成的，所以数量需要获取不能写死
			oUl.style.width = oLis[0].offsetWidth * oLis.length + 'px';
			oContent.style.width = oItems[0].offsetWidth * oItems.length + 'px';

			function fnMove(i) {
				Array.from(oLis).forEach(function(e, i) {
					e.className = ''
				})
				oLis[i].className = 'active';
				// 整个ul往左移动的距离 = 当前li距离ul左端的距离 - （屏幕一半 - 当前li的一半）
				// （屏幕一半 - 当前li的一半）相当于当前li距离屏幕左边的距离。
				let left = oLis[i].offsetLeft - (document.documentElement.clientWidth / 2 - oLis[i].offsetWidth / 2)

				// 判断导航的开头和结尾不能留白
				// 这里的判断其实就相当于滚动时候页面头和页面尾
				if (left < 0) {
					left = 0;
				} else if (left >= oUl.offsetWidth - oNav.offsetWidth) {
					left = oUl.offsetWidth - oNav.offsetWidth;
				}
				oUl.style.transition = '.3s all ease';
				oUl.style.transform = `translateX(${-left}px)`;
				oContent.style.transition = '.3s all ease';
				oContent.style.transform = `translateX(${-oItems[0].offsetWidth * i}px)`;

				x = -oItems[0].offsetWidth * i;

				oUl.addEventListener('transitionend', fnEnd, false);
				// 在这里ajax请求第i页的item的内容
			}

			function fnEnd() {
				oUl.style.transition = 'none';
				oContent.style.transition = 'none';
				oUl.removeEventListener('transitionend', fnEnd);
			}

			function fnEnd1() {
				oContent.style.transition = 'none';
				oContent.removeEventListener('transitionend', fnEnd1);
			}

			Array.from(oLis).forEach(function(e, i) {
				let hammer = new Hammer(e);
				hammer.on('tap', function() {
					fnMove(i)
				})
			})



			hammer.on('panstart', function(ev) {
				startX = ev.center.x;
				startY = ev.center.y;
				old_x = x;
			})
			hammer.on('panmove', function(ev) {
				x = ev.center.x - startX + old_x;
				oContent.style.transform = `translateX(${x}px)`;
			})
			hammer.on('panend', function() {
				if (x > 0) {
					x = 0;
				} else if (x < oItems[0].offsetWidth - oContent.offsetWidth) {
					x = oItems[0].offsetWidth - oContent.offsetWidth;
				}

				let n = Math.round(-x / oItems[0].offsetWidth);

				x = -n * oItems[0].offsetWidth;

				oContent.style.transition = '.3s all ease';
				oContent.style.transform = `translateX(${x}px)`;
				
				oContent.addEventListener('transitionend', fnEnd1, false);

				fnMove(n);
			})
		}
	</script>
</head>
<body>
	<section class="container">
		<div class="nav">
			<ul>
				<li class="active">111</li>
				<li>222</li>
				<li>333</li>
				<li>444</li>
				<li>555</li>
				<li>666</li>
				<li>777</li>
				<li>888</li>
			</ul>
		</div>
		<div class="main"> 
			<div class="content">
				<div class="item">aaa</div>
				<div class="item">bbb</div>
				<div class="item">ccc</div>
				<div class="item">ddd</div>
				<div class="item">eee</div>
				<div class="item">fff</div>
				<div class="item">gggg</div>
				<div class="item">hhh</div>
			</div>
		</div>
	</section>
</body>
</html>